<template>
  <div class="wrapper">
    <template v-for="(item, index) in formItemList">

      <!-- 借助el-form inline 形式展示，适用于表格搜索场景 -->
      <template v-if="inline">
        <slot name="formItems" :col="item" :idx="index" />
      </template>

      <!-- 借助el-row el-col 布局表单样式，适用于表单填写等场景 -->
      <template v-else>
        <!-- 行渲染 -->
        <el-row
          v-if="
            !formItemList[index - 1] ||
              formItemList[index - 1].rowIdx !== item.rowIdx
          "
          :key="index"
        >
          <template v-for="(col, idx) in formItemList">
            <!-- 列渲染 -->
            <el-col
              v-if="
                col.rowIdx === item.rowIdx && formItemsMap[col.key]['isRender']
              "
              :key="idx"
              :span="col.span || span"
            >
              <slot name="formItems" :col="col" :idx="idx" />
            </el-col>
          </template>
        </el-row>
      </template>
    </template>
  </div>
</template>

<script>

export default {
  props: {
  // 是否以内联形式展示
    inline: {
      type: Boolean,
      default: false
    },

    // 表单项列表
    formItemList: {
      type: Array,
      default() {
        return []
      }
    },
    span: {
      type: Number,
      default: 24
    },
    formItemsMap: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>
